<template>
  <div style="background: rgba(244, 247, 250, 1);">
    <Header></Header>
    <!-- <div class="banner_bg">
			<img class="" :src="require('@/assets/front-img/exhibition_banner.jpg')" alt="">
			<div class="banner_title_bg">
				<div class="banner_big_title">众茶线上展会</div>
				<div class="banner_detail_title">线上观展 同样精彩</div>
			</div>
		</div> -->
    <iframe src="https://720yun.com/t/cbvkc9rhzrl?scene_id=61679157" width="100%" height="373px" frameborder="0"></iframe>
    <div v-if="type == 1" class="wrapper">
      <div class="content">
        <div class="article_bg">
          <div class="article_section">展会资讯</div>
          <div class="line"></div>
          <div v-if="articleList.length > 0">
            <div style="margin-top: 30px; display: flex; justify-content: space-between;">
              <div class="detail_bg" @click="newSelect(articleList[0].id)">
                <img class="article_img" :src="articleList[0].image" alt="">
                <div class="article_content_bg">
                  <div class="article_title">{{ articleList[0].name }}</div>
                  <div class="article_detail">{{ articleList[0].viceName }}</div>
                </div>
              </div>
              <div class="detail_bg" @click="newSelect(articleList[1].id)">
                <img class="article_img" :src="articleList[1].image" alt="">
                <div class="article_content_bg">
                  <div class="article_title">{{ articleList[1].name }}</div>
                  <div class="article_detail">{{ articleList[1].viceName }}</div>
                </div>
              </div>
            </div>
            <div style="margin-top: 40px; display: flex; justify-content: space-between;">
              <div class="detail_bg" @click="newSelect(articleList[2].id)">
                <img class="article_img" :src="articleList[2].image" alt="">
                <div class="article_content_bg">
                  <div class="article_title">{{ articleList[2].name }}</div>
                  <div class="article_detail">{{ articleList[2].viceName }}</div>
                </div>
              </div>
              <div class="detail_bg" @click="newSelect(articleList[3].id)">
                <img class="article_img" :src="articleList[3].image" alt="">
                <div class="article_content_bg">
                  <div class="article_title">{{ articleList[3].name }}</div>
                  <div class="article_detail">{{ articleList[3].viceName }}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="video_bg">
          <video class="video" src="https://image.utea88.com/exhibit/xsz.mp4" controls="controls" autoplay playsinline></video>
        </div>
        <div class="list_bg">
          <div style="display: flex;">
            <img style="width:640px; height: 640px;" :src="imgList[0].img" alt="" @click="list_click(imgList[0])">
            <div style="margin-left: 20px;">
              <img style="width:640px; height: 310px;" :src="imgList[1].img" alt="" @click="list_click(imgList[1])">
              <img style="margin-top: 20px; width:640px; height: 310px;" :src="imgList[2].img" alt="" @click="list_click(imgList[2])">
            </div>
          </div>
          <div style="margin-top:20px; display: flex;">
            <img style="width:640px; height: 640px;" :src="imgList[3].img" alt="" @click="list_click(imgList[3])">
            <div style="margin-left: 20px;">
              <img style="width:640px; height: 310px;" :src="imgList[4].img" alt="" @click="list_click(imgList[4])">
              <img style="margin-top: 20px; width:640px; height: 310px;" :src="imgList[5].img" alt="" @click="list_click(imgList[5])">
            </div>
          </div>
          <div style="margin-top:20px; display: flex;">
            <img style="width:640px; height: 310px;" :src="imgList[6].img" alt="" @click="list_click(imgList[6])">
            <img style="margin-left: 20px; width:640px; height: 310px;" :src="imgList[7].img" alt="" @click="list_click(imgList[7])">
          </div>
        </div>
      </div>
    </div>
    <div v-else>
      <div v-if="list.length > 0" class="shop_bg">
        <div class="list_bg">
          <div class="nav_bg">
            <div class="nav" @click="handleClickNav">线上展会</div>
            <div> > </div>
            <div>{{ classificationName }}</div>
          </div>
          <div class="section" v-for="(item) in handleListData" :key="item.id">
            <div class="content_bg" v-for="(classification,index) in item" :key="index" @click="$router.push({path: '/front-shop/home',query:{id: classification.id}})">
              <div class="img_bg">
                <img :src="classification.shopImage ? classification.shopImage : require('@/assets/front-img/shop/store-placeholder.png')" alt/>
              </div>
              <div class="title_bg">
                <div class="title">{{ classification.companyName }}</div>
                <div class="info_title">查看详情</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <Pagination v-if="list.length > 0" :pageNo.sync="listQuery.pageNo" :pageSize.sync="listQuery.pageSize" :total="total" :autoScroll="false" @change="getData()" />
    </div>
    <Footer></Footer>
  </div>
</template>

<script>
import {
  getShopPageByQo,
  getDinnerAdvisement
} from "@/api/front-home.js";
import Footer from "@/views/front/components/Footer";
import Header from "@/views/front/components/Header";
import Pagination from "@/views/front/components/Pagination";

export default {
  name: "",
  props: {

  },
  components: {
    Footer,
		Header,
    Pagination
  },
  data() {
    return {
      classificationList: [],
      list: [],
      listQuery: {
        shopDealNum$sort: 'desc',
        pageNo: 1,
        pageSize: 15,
      },
      classificationName: '',
      type: 1,
      imgList:[
        {
          "img": "https://image.utea88.com/exhibit/icon_show_puer.png",
          "name": "普洱馆"
        },
        {
          "img": "https://image.utea88.com/exhibit/icon_show_green_tea.png",
          "name": "绿茶馆"
        },
        {
          "img": "https://image.utea88.com/exhibit/icon_show_red_tea.png",
          "name": "红茶馆"
        },
        {
          "img": "https://image.utea88.com/exhibit/icon_show_white_tea.png",
          "name": "白茶馆"
        },
        {
          "img": "https://image.utea88.com/exhibit/icon_show_wulong_tea.png",
          "name": "乌龙茶馆"
        },
        {
          "img": "https://image.utea88.com/exhibit/icon_show_yellow_tea.png",
          "name": "黄茶馆"
        },
        {
          "img": "https://image.utea88.com/exhibit/icon_show_black_tea.png",
          "name": "黑茶馆"
        },
        {
          "img": "https://image.utea88.com/exhibit/icon_show_cha_peitao.png",
          "name": "茶配套"
        }
      ],
      articleList: []
    }
  },
  computed: {
    handleData() {
      let index =0;
      let count = 5;
      let arrTemp = [];
      let experts = this.classificationList;
      for(let i=0;i<this.classificationList.length;i++){
        index = parseInt(i/count);
        if (arrTemp.length <= index) {
            arrTemp.push([]);
        }
        arrTemp[index].push(experts[i])
      }
      return arrTemp
    },
    handleListData() {
      let index =0;
      let count = 5;
      let arrTemp = [];
      let experts = this.list;
      for(let i=0;i<this.list.length;i++){
        index = parseInt(i/count);
        if (arrTemp.length <= index) {
            arrTemp.push([]);
        }
        arrTemp[index].push(experts[i])
      }
      return arrTemp
    }
  },
  watch: {},
  methods: {
    getData() {
      getShopPageByQo(this.listQuery).then((res) => {
        this.list = res.list || [];
        this.total = res.totalCount;
      });
    },
    list_click(item) {
      this.classificationName = item.name
      this.type = 2
      this.listQuery.pageNo = 1
      this.list = []
      this.getData()
    },
    handleClickNav() {
      this.type = 1
    },
    getAdvisementData() {
      getDinnerAdvisement().then(res => {
        this.articleList = res || []
      })
      .catch((err) => {
        console.log(err)
      })
    },
    newSelect(id) {
      this.$router.push({
        path: "/front-newDetail",
        query: {
          id: id
        },
      });
    },
  },
  created() {
    this.getAdvisementData()
  },
  mounted() {
    
  },
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {}, // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>

<style lang='scss' scoped>
  .banner_bg {
		position: relative;
		width: 100%;
		height: 373px;

		.banner_title_bg {
			position: absolute;
			display: flex;
			flex-direction: column;
			align-items: center;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;

			.banner_big_title {
				margin-top: 119px;
				height: 79px;
				color: rgba(255, 255, 255, 1);
				font-size: 60px;
				font-weight: 700;
				line-height: 79px;
			}

			.banner_detail_title {
				margin-top: 2px;
				height: 48px;
				color: rgba(255, 255, 255, 1);
				font-size: 36px;
				font-weight: 300;
				line-height: 48px;
			}
		}
	}

  .wrapper {
		width: 100%;
		margin-top: 50px;
    margin-bottom: 50px;
		display: flex;
		justify-content: center;

		.content {
			width: 1300px;
    }
  }

  .article_bg {
    padding-top: 21px;
    padding-left: 30px;
    padding-right: 30px;
    width: 100%;
    height: 391px;
    background: white;

    .article_section {
      height: 27px;
      line-height: 27px;
      font-size: 18px;
      color: rgb(51, 51, 51);
    }

    .line {
      margin-top: 10px;
      width: 100%;
      height: 1px;
      background: rgba(218, 224, 232, 1);
    }

    .detail_bg {
      position: relative;
      width: 570px;
      height: 116px;
      cursor: pointer;
      .article_img {
        width: 160px;
        height: 100%;
      }

      .article_content_bg {
        position: absolute;
        left: 190px;
        top: 0;
        right: 0;
        bottom: 0;

        .article_title {
          width: 100%;
          height: 24px;
          line-height: 24px;
          color: rgba(56, 56, 56, 1);
          font-size: 18px;
          @include ellipsis($line: 1);
        }

        .article_detail {
          margin-top: 11px;
          width: 100%;
          height: 80px;
          font-size: 13px;
          line-height: 20px;
          color: rgba(153, 153, 153, 1);
          @include ellipsis($line: 4);
        }
      }
    }
  }

  .video_bg {
    margin-top: 50px;
    width: 100%;
    height: 775px;
    padding: 50px;
    background: white;

    .video {
      width: 100%;
      height: 100%;
    }
  }

  .list_bg {
    margin-top: 23px;
    width: 100%;
  }

  .shop_bg {
		width: 100%;
		margin-top: 50px;
    margin-bottom: 50px;
		display: flex;
		justify-content: center;

		.list_bg {
			width: 1300px;

      .nav_bg {
        white-space:pre;
        display: flex;
        font-size: 18px;
        line-height: 18px;
        color: rgb(51, 51, 51);
        .nav {
          &:hover,
					&:focus,
					&:visited {
						color:rgba(252, 38, 38, 1);
						cursor: pointer;
					}
        }
      }

			.section {
				margin-top: 40px;
				width: 100%;
				display: flex;

				&:nth-child(1) {
					margin-top: 0px;
				}

				.content_bg {
					position: relative;
					width: 248px;
					height: 305px;
					border: 1px solid rgba(218, 224, 232, 1);;
					box-sizing:border-box;
					margin-left: 15px;
					background: #fff;
					
					&:nth-child(5n+ 1) {
						margin-left: 0px;
					}
					&:hover,
					&:focus,
					&:visited {
						border: 1px solid rgba(252, 38, 38, 1);
						cursor: pointer;
					}

					.img_bg {
            display: flex;
            justify-content: center;
            margin-top: 25px;
						width: 100%;
						height: 130px;

						img {
							width: 130px;
							height: 130px;
              border-radius: 65px;
      			}
					}

          .title_bg {
            margin: 25px 25px 25px 25px;

            .title {
              height: 52px;
              font-size: 18px;
              line-height: 26px;
            }

            .info_title {
              margin-top: 15px;
              width: 100px;
              height: 36px;
              line-height: 36px;
              text-align: center;
              background: rgba(14, 131, 192, 1);
              color: white;
              border-radius: 5px;
            }
          }
				}
			}
		}
	}
</style>